<template>
	<view class="settle">
		<view class="forms">
			<view class="line dFlex jBetween_aCenter">
				<text class="lineTit">服务点名称</text>
				<view class='lineVal dFlex jEnd_aCenter'>
					<view class="ipt">
						<input type="text" v-model='store_name' placeholder="请输入服务点名称" placeholder-style="color:#999999;">
					</view>
				</view>
			</view>
			<view class="line dFlex jBetween_aCenter">
				<text class="lineTit">昵称</text>
				<view class='lineVal dFlex jEnd_aCenter'>
					<view class="ipt">
						<input type="text" v-model='nickname' placeholder="请输入团长昵称" placeholder-style="color:#999999;">
					</view>
				</view>
			</view>
			<view class="line dFlex jBetween_aCenter">
				<text class="lineTit">手机号</text>
				<view class='lineVal dFlex jEnd_aCenter'>
					<view class="ipt">
						<input type="number" v-model='phone' placeholder="请输入手机号码" placeholder-style="color:#999999;">
					</view>
				</view>
			</view>
			<view class="line dFlex jBetween_aCenter">
				<text class="lineTit">所在地区</text>
				<view class='lineVal dFlex jEnd_aCenter'>
					<view class="ipt" @tap='chooseAdd'>
						<input type="text" v-model='address' placeholder="请选择所在地区" disabled placeholder-style="color:#999999;">
					</view>
					<view class="rightIcon imgPublic">
						<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/rightIcon.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
			<view class="line dFlex jBetween_aCenter">
				<text class="lineTit">详细地址</text>
				<view class='lineVal dFlex jEnd_aCenter'>
					<view class="ipt">
						<input type="text" v-model="address_detail" placeholder="请输入详细地址" placeholder-style="color:#999999;">
					</view>
				</view>
			</view>
			<view class="line dFlex jBetween_aCenter">
				<text class="lineTit">是否可冷藏</text>
				<view class='lineVal dFlex jEnd_aCenter'>
					<switch v-model='is_lc' :checked="is_lc" @change='changeLC' style="transform: scale(0.8);"/>
				</view>
			</view>
		</view>
		<view class="part">
			<view class="title">服务点图片</view>
			<view class="imgs dFlex jStart_aStart fWap">
				<view class="imgOne imgPublic" v-for="(item,index) in ztd" :key='index'>
					<image :src="item" mode="widthFix"></image>
					<view class="del imgPublic" @tap.stop='delImg(index)' >
						<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/del.png" mode="widthFix"></image>
					</view> 
				</view>
				<view class="upTool imgPublic" @tap='upImg' v-if='ztd.length < 1'>
					<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/upTool.png" mode="widthFix"></image>
				</view>
			</view>
		</view> 
		
		<view class="loginBtn" @click='saveTeam'>保存信息</view>
	</view> 
</template>

<script>
	export default {
		data() {
			return {
				address_id:"",
				store_name:'',
				nickname:'',
				phone:"",
				address:'',
				address_detail:'',
				lat:'',
				lng:'',
				is_lc:false,
				// 自提点
				ztd:[],
			};
		},
		onLoad(e) {
			// this.getTeamList();
			this.initUser();
		},
		onShow(){
			
		},
		methods:{
			getTeamList(){
				this.tool.getData("/api/Mall/returnTeamList", {
					lat: getApp().globalData.lat,
					lng: getApp().globalData.lng,
				}).then(res => {
					console.log(res);
					if (res) {
						
					}
				}).catch(err => {
					console.log(err);
				})
			},
			changeLC(event){
				this.is_lc = event.detail.value;
			},
			saveTeam(){
				let tips = '';
				if (!this.nickname) {
					tips = '团长昵称';
				} else if (!this.phone) {
					tips = '手机号码';
				} else if (!this.address) {
					tips = '所在地区';
				} else if (!this.address_detail) {
					tips = '详细地址';
				} else if (!this.store_name) {
					tips = '服务点名称';
				} else if (!this.ztd.length) {
					tips = '服务点图片';
				} 
				/* else if (this.is_lc && !this.ice_imgs) {
					tips = '冷藏柜图片';
				} else if (!this.store_logo) {
					tips = '店铺LOGO';
				} else if (!this.store_license) {
					tips = '营业执照';
				} else if (!this.card_front) {
					tips = '身份证正面';
				} else if (!this.card_back) {
					tips = '身份证反面';
				} */
				if (tips) {
					uni.showToast({
						title: '请完善'+tips,
						icon: "none",
					})
					return;
				}
				this.tool.getData("/api/User/saveTeamAddress", {
					receiver: this.nickname,
					phone: this.phone,
					address: this.address,
					address_detail: this.address_detail,
					lat: this.lat,
					lng: this.lng,
					store_name: this.store_name,
					store_imgs: this.ztd.join(','),
					is_lc: this.is_lc ? '1' : '0',
					address_id:this.address_id,
					/* ice_imgs: this.ice_imgs,
					store_logo: this.store_logo,
					store_license: this.store_license,
					card_front: this.card_front,
					card_back: this.card_back, */
				}).then(res => {
					console.log(res);
					if (res) {
						uni.showToast({
							title: "信息已保存",
							icon: "success"
						})
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 1650)
					}
				}).catch(err => {
					console.log(err);
				})
			},
			// 上传图片
			upImg(key) {
				let len = 9 - this.ztd.length >= 0 ? 9 - this.ztd.length : 0;
				uni.chooseMedia({
					count: len,
					mediaType: ['image'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						if (res.tempFiles.length) {
							res.tempFiles.forEach((tempFile)=>{
								this.tool.upImg(tempFile.tempFilePath).then(file => {
									if (file) {
										this.ztd.push(file.fullurl);
									}
									console.log(this.ztd);
								})
							})
						}
					},
					fail: (err) => {
						console.log(err);
					}
				})
			},
			delImg(idx){
				this.ztd.splice(idx,1);
			},
			// 获取用户信息
			initUser(){
				this.tool.getData('/api/user/info',{},'',this).then(res=>{
					console.log(res);
					if(res){
						this.address_id = res.address_id;
						this.store_name = res.store_name;
						this.nickname = res.nickname;
						this.phone = res.phone;
						this.address = res.address;
						this.address_detail = res.address_detail;
						this.lat = res.lat;
						this.lng = res.lng;
						this.is_lc = res.is_lc == 1 ? true : false;
						this.ztd = res.store_imgs ? res.store_imgs.split(',') : [];
					}
				}).catch(err=>{
					console.log(err);
				})
			},
			// 选择所在地区
			chooseAdd(){
				uni.chooseLocation({
					success: (locate) => {
						if(locate.errMsg == 'chooseLocation:ok'){
							var reg = /.+?(省|市|自治区|自治州|县|区)/g;
							this.address = locate.address.match(reg).join('_');
							this.address_detail = locate.name;
							this.lat = locate.latitude;
							this.lng = locate.longitude;
						}
					},
					fail:(err)=>{
						console.log(err);
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.loginBtn{
		width: 74.4%;
		left: 12.8%;
		padding: 22rpx 0;
		background: linear-gradient(180deg, #FC9700 0%, #FF5000 100%);
		position: fixed;
		bottom: 32px;
		text-align: center;
		border-radius: 40px;
		color: white;
		font-size: 16px;
	}
	.part{
		width: 100%;
		background: white;
		margin-bottom: 12px;
		padding:12px;
		box-sizing: border-box;
		.title{
			box-sizing: border-box;
			font-weight: bold;
		}
		.forms{
			width: 100%;
			.line{
				padding: 12px;
				box-sizing: border-box;
				border-bottom: 1px solid #E9E9E9;
				.lineTit{
					// font-weight: bold;
					width: 22%;
					text-align: left;
					margin-right: 10px;
				}
				.lineVal{
					flex: 1;
					.tx{
						width: 40px;
						height: 40px;
						image{
							width: 40px;
							height: 40px;
							border-radius: 50%;
						}
					}
					.ipt{
						flex: 1;
						input{
							text-align: right;
						}
					}
					.rightIcon{
						width: 16px;
						margin-left: 4px;
					}
				}
			}
			.line:last-child{
				border: none;
			}
		}
		.imgs{
			width: 100%;
			padding:12px 0;
			.sfz{
				width:130px;
			}
 			.upTool{
				width: 75px;
				height: 75px;
				margin-right:0;
			}
			.imgOne{
				width: 75px;
				height: 75px;
				border-radius: 4px;
				margin-right: 8px;
				margin-bottom: 8px;
				position: relative;
				overflow:hidden;
				image{
					width: 100%;
					height: 100%;
				}
				.del{
					width: 16px;
					height: 16px;
					position: absolute;
					top: 0;
					right: 0;
					image{
						width: 100%;
						height: 100%;
					}
				}
			}
			.imgOne:nth-child(4n + 4){
				margin-right: 0;
			}
		}
	}
	.forms{
		width:100%;
		padding:0 12px;
		box-sizing: border-box;
		background:white;
		margin-bottom:12px;
		.line{
			padding: 12px;
			box-sizing: border-box;
			border-bottom: 1px solid #E9E9E9;
			.lineTit{
				width: 22%;
				text-align: left;
				margin-right: 10px;
			}
			.lineVal{
				flex: 1;
				.tx{
					width: 40px;
					height: 40px;
					image{
						width: 40px;
						height: 40px;
						border-radius: 50%;
					}
				}
				.ipt{
					flex: 1;
					input{
						text-align: right;
					}
				}
				.rightIcon{
					width: 16px;
					margin-left: 4px;
				}
			}
		}
		.line:last-child{
			border: none;
		}
	}
	page{
		background: #F6F6F6;
	}
</style>
